<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #pj{
            transition: all .5s;
            position: relative;
            width: 100vh;
            height: 1000px;
            background-image:url("../img/image/05.jpg") ;
            background-size:cover;
            background-repeat: no-repeat;
            left: 280px;
        }
        #pj2{
            position: absolute;
            width: 200px;
            display: flex;
            top: 40px;
            margin-left: -460px;
            left: 500px;
        }
        #pj2 img{
            width: 100px;
            height:100px ;
            z-index: 1;
        }
        #show{
            display: none;
            position: absolute;
            width: 200px;
            height: 200px;
            left: 150px;
            top: 200px;
        }
        #show img{
            width: 200px;

        }
    </style>
</head>
<body>
<div  id="pj">
    <div id="pj2">
        <img src="../img/image/01.jpeg" />
        <img src="../img/image/02.jpg" >
        <img src="../img/image/03.jpg" >
        <img src="../img/image/04.jpeg">
    </div>
    <div id="show" onload="show()">
        <img src="../img/image/06.jpg" alt="" >
        <button onclick="hide()">关闭</button>
    </div>
</div>
<script>
    var pj2 = document.getElementById('pj2').getElementsByTagName('img')
    var pj = document.getElementById('pj')

    for (var i=0;i<pj2.length;i++){
        pj2[i].onclick = function () {
            console.log(this.src)
            pj.style.backgroundImage = 'url('+this.src+')'
        }
    }

    setTimeout(show,2000)
    function show() {
        let show=document.getElementById('show')
        show.style.display='block'
    }
    function hide() {
        let show=document.getElementById('show')
        show.style.display='none'
    }
</script>

</body>
</html>